<template>
  <div class="slot-list">
    <div class="warpper">
      <ul>
        <li v-for="todo in filteredTodos" v-bind:key="todo.id">
          <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
          -->
          <slot name="todo" v-bind:todo="todo">
            <!-- 后备内容 -->
            {{ todo.text }}
          </slot>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "SlotList",
  data() {
    return {
      filteredTodos: [
        { id: "1", text: "java", isComplete: true },
        { id: "2", text: "oracle", isComplete: false },
        { id: "3", text: "php", isComplete: false },
        { id: "4", text: "mysql", isComplete: false },
        { id: "5", text: "vue", isComplete: true },
        { id: "6", text: "react", isComplete: true }
      ]
    };
  },
  computed: {}
};
</script>

<style lang="stylus" scoped>
.slot-list {
  .warpper {
    ul {
      box-sizing: border-box
      list-style-type: none
      padding: 0px
      margin: 0px
      li {
        padding: 3px
      }
    }
  }
}
</style>
